<template>
    <div style="min-height: 700px" class="table_paging card_list">
        <div class="card_content_wrapper">
            <div class="loadMoreList">
                <ContentCard v-for="item in 40" :key="item"></ContentCard>
            </div>
            <div class="load_more_btn_wrapper" style="">
                <span class="load_more_btn" style="">加载更多</span>
                <div style="color: rgb(204, 204, 204); text-align: center; padding-top: 20px; display: none">
                    — 没有更多内容啦 —
                </div>
            </div>
            <el-pagination background layout="prev, pager, next" :total="1000" style="display: none" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "VideoCoursesList",
});
</script>

<script setup lang="ts">
import ContentCard from "./ContentCard.vue";
</script>
<style scoped lang="less">
.card_content_wrapper {
    margin-top: 20px;
    padding-bottom: 20px;

    .loadMoreList {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: auto;
        margin-right: auto;
    }
}

.table_paging {
    .load_more_btn_wrapper {
        padding: 4px 0 0;
        height: 40px;
        margin-bottom: 40px;
    }

    .load_more_btn {
        display: block;
        width: 140px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #82858e;
        border: 1px solid #eaecf0;
        border-radius: 4px;
        background: #fff;
        text-align: center;
        margin: 20px auto 0;
        cursor: pointer;
    }
}
</style>
